<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<script src="./js/jquery-1.11.1.js"></script>
		<style>
			* {
			    font-family: "微软雅黑";
			    font-size: 14px;
			    padding: 0;
			    margin: 0;
			}
			.menu {
			    width: 236px;
			    height: 440px;
			    background-color: rgba(0, 0, 0, 0.4);
			    padding-top: 20px;
			    position: absolute;
			    left: 0;
			    top: 0;
			}
			.ul {
			    list-style: none;
			}
			.menu li {
			    width: 206px;
			    height: 43px;
			    line-height: 43px;
			    padding-left: 30px;
			    color: #fff;
			    position: relative;
			}
			.menu span {
			    float: right;
			    margin-right: 25px;
			}
			.submenu {
			    width: 530px;
			    height: 460px;
			    background-color: #fff;
			    padding-left: 33px;
			    padding-top: 25px;
			    position: absolute;
			    right: 0;
			    top: -25px;
			    margin-right: -563px;
				display: none;
			}
			.submenu a {
			    display: block;
			    line-height: 36px;
			    margin-bottom: 40px;
			    color: black;
				
				text-decoration: none;
			}
			.submenu .xuangou a {
			    color: #ff6700;
			}
			.menu .current {
			background-color: #fe8729;
			}
			.submenu div.first_img{
				float:left;
				margin-right:23px;
				margin-top: 25px;
			}
			.submenu div.first_form{
				float:left;
				margin-right:40px;
				margin-top: 25px;
			}
			.submenu div.first_buy{
				float:left;
				padding-top:5px;
				margin-right:34px;
				margin-top: 25px;
			}
			.submenu div.second_img{
				float:left;
				margin-right:15px;
				margin-top: 25px;
			}
			.submenu div.second_form{
				float:left;
				padding-top:5px;
				margin-right:34px;
				margin-top: 25px;
			}
			.submenu div.second_buy{
				padding-top:5px;
				margin-right:34px;
				margin-top: 25px;
				line-height: 35px;
			}
			.submenu div.first_buy div.xuangou{
				line-height: 35px;
			}
		</style>
	</head>
	<body>
		<div class="menu">
		    		<ul>
						<!-- 鼠标移入，li class="current"【背景变色】 display: none;变为block【显示隐藏区域】 -->
		            	<li class=" ">手机 平板 电话卡<span>&gt;</span>
		                </li>
		                <li>电视 盒子<span>&gt;</span></li>
		                <li>路由器 智能硬件<span>&gt;</span></li>
		                <li>移动电源 插线板<span>&gt;</span></li>
		                <li>耳机 音箱<span>&gt;</span></li>
		                <li>电池 存储卡<span>&gt;</span></li>
		                <li>保护套 后盖<span>&gt;</span></li>
		                <li>贴膜 其他配件<span>&gt;</span></li>
		                <li>米兔 服装<span>&gt;</span></li>
		                <li>箱包 其他周边<span>&gt;</span></li>
						<div class="submenu">
						    <div  class="first_img">
								<img src="./img/phone_img.png">
							</div>
						    <div class="first_form">
								<a>小米手机5</a>
								<a>小米手机4S</a>
								<a>小米Note</a>
								<a>小米手机4</a>
								<a>小米手机4c</a>
								<a>红米Note 3</a>
							</div>
						    <div class="first_buy">
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						    </div>
						    <div class="second_img">
								<img src="./img/phone_img01.png">
							</div>
						    <div class="second_form">
								<a>红米手机3</a>
								<a>小米平板2</a>
								<a>电信版</a>
								<a>合约机</a>
								<a>对比手机</a>
								<a>电话卡</a>
							</div>
						    <div  class="second_buy">
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						        <div class="xuangou"><a href="#">选购</a></div>
						    </div>
						</div>
		            </ul>
		            
		    </div>
			<script>
			    $(function() {
			        // 鼠标移入菜单项时显示隐藏的div
			        $('.menu li').hover(function(){
			                $(this).addClass('current');
			               $('.submenu').css('display', 'block');}, // 显示
			            function() {
			                $(this).removeClass('current');
			                $('.submenu').css('display', 'none');} // 隐藏
			        );
			    });
				// 鼠标移入div仍然显示
				$('.submenu').mouseenter(function(){
				$('.submenu').css('display', 'block');
				});
				// 移出-隐藏
				$('.submenu').mouseleave(function(){
				$('.submenu').css('display', 'none');
				});
			</script>
	</body>
</html>